<!-- 登录页 -->
<template>
    <div class="container">
        <div class="form">
            <div class="title">
                <span>千锋科技后台管理</span>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="ruleForm.pwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// 引入登录接口函数
import { loginApi } from '@/utils/https';
import { setCookie } from '@/utils/cookie';
export default {
    data() {
        return {
            ruleForm: {
                name: '', // 用户名
                pwd: '', // 密码
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 6, message: '长度在6个字符', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log(this.ruleForm);
                    // 引入接口
                    loginApi(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            // 登陆成功
                            // 1.用cookie存储当前token
                            setCookie('token', res.data.token);
                            // 2，用localStorage存储角色
                            localStorage.setItem('role', res.data.role);
                            // 3.跳转到首页
                            this.$router.push('/');
                            this.$message({
                                message: res.msg,
                                duration: 1000,
                                type: 'success',
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                duration: 1000,
                                type: 'error',
                            });
                        }
                    });
                } else {
                    alert('失败!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.container {
    width: 100%;
    height: 100%;
    background: url('../../assets/bg8.jpeg') no-repeat center;
    background-size: cover;
    .form {
        width: 370px;
        height: 298px;
        padding: 5px 10px;
        background-color: #fff;
        opacity: 0.8;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title {
            width: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        /deep/.ivu-form {
            width: 300px;
        }
        /deep/.ivu-btn {
            width: 300px;
            height: 30px;
        }
    }
}
</style>
